<template>
  <view
    @touchstart="touchStart"
    @touchend="touchEnd"
    class="flex monitor-detail justify-center items-center"
  >
    <view class="-mt-20 w-full">
      <text class="mb-10rpx pl-8 block">
        <text class="text-white text-28rpx">{{ "猜猜" }}</text>
      </text>
      <view class="bg-white h-425rpx"></view>
    </view>
  </view>
</template>
<script setup>
import { reactive, ref } from "vue";
const startTime = ref(Date.now());
const startPosition = reactive({
  x: 0,
  y: 0,
});

const touchStart = (event) => {
  // 获取初始时间
  startTime.value = Date.now();
  // 获取初始的位置
  startPosition.x = event.changedTouches[0].clientX;
  startPosition.y = event.changedTouches[0].clientY;
};
const touchEnd = (event) => {
  const endTime = Date.now();
  if (endTime - startTime.value > 2000) {
    // 默默失败
    return;
  }
  const endPosition = {
    x: event.changedTouches[0].clientX,
    y: event.changedTouches[0].clientY,
  };
  // 计算滑动距离
  const distance = {
    x: Math.abs(endPosition.x - startPosition.x),
    y: Math.abs(endPosition.y - startPosition.y),
  };
  // 判断其滑动的距离是否值得触发，给定一个10 的距离
  if (distance.y > distance.x && distance.y > 10) {
    if (startPosition.y > endPosition.y) {
      // 向上滑动
      return;
    } else {
      // 向下滑动
      return;
    }
    // 判定上下滑动
  } else if (distance.x > distance.y && distance.x > 10) {
    console.log("水平滑动了");
    return;
  } else {
    // 默默失败
    return;
  }
};
</script>
